<template>
  <div class="product">
    <Headers></Headers>
    <div class="main">
      <div class="banner">
        <img src="../../../static/product/product-banner.png" alt="">
        <div class="w1200 clear">
          <div class="title-left">
            <p>咨询分享</p>
          </div>
          <div class="title-right">
            <router-link to="/share/info"  class="jishu active heighta">技术下载</router-link>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="w1200">
          <div class="news-main-content">
            <div class="news-list clearfix" v-for=" item in news">
              <div class="news-list-lt">
                <router-link to=""><img v-bind:src="item.img" alt=""></router-link>
              </div>
              <div class="news-list-ct">
                <router-link to="/news/details?id=13">
                  <p style="color: rgb(200, 200, 200);">{{item.date}}</p>
                  <p style="color: rgb(200, 200, 200);">{{item.time}}</p>
                </router-link>
              </div>
              <div class="news-list-rt">
                <p>
                  <router-link to="/news/details?id=13" style="color: rgb(102, 102, 102);">{{item.title}}</router-link>
                </p>
                <p>
                  <router-link to="/news/details?id=13" style="color: rgb(153, 153, 153);">{{item.content}}</router-link>
                </p>
                <span style="border: 1px solid rgb(153, 153, 153); background: transparent;"><router-link to="/news/details?id=13" style="color: rgb(102, 102, 102);">阅读全文</router-link></span>
              </div>
            </div>

            <div class="news-page">
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="8"
                  :page-size="4"
                  @current-change="changedata"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Foots></Foots>
  </div>
</template>

<script>
import Headers from '../../components/Headers'
import Foots from '../../components/Foots'
export default {
  name: 'info',
  data () {
    return {
      news: {}
    }
  },
  components: {
    Headers: Headers,
    Foots: Foots
  },
  created: function () {
    let that = this
    that.$axios.get('https://www.easy-mock.com/mock/5c00e13a57282f4cecbc6628/lchen/jisudown').then(function (response) {
      that.news = response.data.data.slice(0, 4)
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    changedata: function (val) {
      let that = this
      that.$axios.get('https://www.easy-mock.com/mock/5c00e13a57282f4cecbc6628/lchen/jisudown').then(function (response) {
        that.news = response.data.data.slice((val * 4 - 4), (val * 4))
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="less">
  .product{
    .main{
      .banner{
        position: relative;
        img{
          display: block;
          max-width: 100%;
        }
        .w1200{
          width: 1200px;
          margin: 0 auto;
          height: 65px;
          background: rgba(76, 140, 220, 0.8);
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -600px;
          .title-left{
            float: left;
            height: 65px;
            line-height: 65px;
            margin-left: 51px;
            p{
              font-size: 18px;
              color: #ffffff;
              font-weight: bold;
              font-family: "Microsoft YaHei";
            }
          }
          .title-right{
            float: right;
            height: 65px;
            line-height: 65px;
            position: relative;
            a{
              font-size: 14px;
              color: #ffffff;
              font-family: "Microsoft YaHei";
              padding-right: 46px;
              position: relative;
              &.active{
                &:before{
                  content: '';
                  display: block;
                  width: 63px;
                  height: 2px;
                  background: #fff;
                  position: absolute;
                  bottom: 5px;
                  left: 0;
                }
              }
              &.heighta{
                height: 65px;
                display: inline-block;
              }
            }
            .product-infos{
              position: absolute;
              background: #999999;
              left: -991px;
              top: 65px;
              width: 1200px;
              height: 50px;
              text-align: center;
              ul{
                height: 100%;
                overflow: hidden;
                line-height: 50px;
                display: inline-block;
                li{
                  text-align: center;
                  float: left;
                  margin-right: 60px;
                  a{
                    font-size: 14px;
                    color: #ffffff;
                    font-family: "Microsoft YaHei";
                    margin-right: 65px;
                    padding-bottom: 10px;
                  }
                }
              }
            }
            .product-info{
              position: absolute;
              background: #999999;
              left: -991px;
              top: 65px;
              width: 1200px;
              height: 50px;
              text-align: center;
              ul{
                height: 100%;
                overflow: hidden;
                line-height: 50px;
                display: inline-block;
                li{
                  text-align: center;
                  float: left;
                  margin-right: 60px;
                  a{
                    font-size: 14px;
                    color: #ffffff;
                    font-family: "Microsoft YaHei";
                    margin-right: 65px;
                    padding-bottom: 10px;
                  }
                }
              }
            }
          }
        }
      }
      .content{
        .w1200{
          width: 1200px;
          margin: 0 auto;
        }
      }
    }
  }
  .news-main-content{
    padding: 89px 100px 73px 100px;
    background: #fff;
    .news-list{
      padding-bottom: 25px;
      border-bottom: 1px solid #eeeeee;
      padding-top: 25px;
      overflow: hidden;
      .news-list-lt{
        width: 280px;
        height: 170px;
        border-radius: 5px 5px;
        overflow: hidden;
        float: left;
        a{
          img{
            max-width: 100%;
          }
        }
      }
      .news-list-ct{
        float: left;
        width: 115px;
        text-align: center;
        border-right: 1px solid #c8c8c8;
        height: 170px;
        a{
          p{
            &:first-child{
              font-size: 54px;
              color: #c8c8c8;
              font-family: "Impact";
            }
            &:nth-child(2){
              font-size: 14px;
              color: #c8c8c8;
              font-family: "Microsoft Yahei";
              font-weight: bold;
            }
          }
        }
      }
      .news-list-rt{
        overflow: hidden;
        padding-left: 13px;
        height: 170px;
        padding-top: 13px;
        p{
          &:first-child{
            font-size: 16px;
            font-family: "Microsoft Yahei";
            font-weight: bold;
            margin-bottom: 14px;
          }
          &:nth-child(2){
            font-size: 12px;
            font-family: "Microsoft Yahei";
            margin-bottom: 37px;
          }
        }
        span{
          padding: 12px 42px;
          border: 1px solid #999;
        }
      }
    }
    .news-page{
      text-align: center;
      margin-top: 40px;
    }
  }
</style>